<template>
  <div class="main">
    <el-card class="box-card main-left">
      <div class="card-header">
        <div class="card-left">
          <el-steps
            :space="80"
            :active="2"
            align-center
            finish-status="success"
          >
            <el-step title="投标"></el-step>
            <el-step title="合同签订"></el-step>
            <el-step title="施工准备"></el-step>
            <el-step title="准备"></el-step>
            <el-step title="结算"></el-step>
            <el-step title="销项"></el-step>
          </el-steps>
        </div>
        <div class="card-right">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="form"
            label-width="68px"
            size="mini"
          >
            <el-form-item label="审批人">
              <el-input
                style="width: 120px"
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select
                style="width: 120px"
                v-model="formInline.region"
                placeholder="活动区域"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="flag" size="mini">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="me">与我相关</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="box">
        <div class="card-content">
          <el-tabs
            :tab-position="tabPosition"
            v-model="tabIndex"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="(item, index) in tabs"
              :key="index"
              :label="item.label"
              :name="item.name"
              :v-if="item.isShow"
            >
            </el-tab-pane>
          </el-tabs>
        </div>
        <div
          class="scroll-content"
          @scroll="onScroll"
          :style="'overflow-y: auto;height:' + contentStyleObj.height"
        >
          <div
            v-for="(item, index) in tabs"
            :key="index"
            :label="item.label"
            :ref="tabs.id"
            class="scroll-item"
          >
            <div class="scroll-header">
              <span class="title">{{ item.value }}</span>
            </div>

            <el-row>
              <el-col :span="4" v-for="(item, index) in list" :key="index">
                <div class="list-item">
                  <div class="item-top">
                    <span class="item-num">{{ item.num }}</span>
                    <span class="item-type">{{ item.type }}</span>
                    <span class="item-count">{{ item.conut }}</span>
                  </div>
                  <div class="item-text">{{ item.text }}</div>
                  <div class="item-manager">{{ item.manger }}</div>
                  <div class="item-line"></div>
                  <div class="item-tag">
                    <span class="tag-rig bg"></span>
                    <span class="tag-rig">{{ item.tag[0] }}</span>
                    <span class="tag-rig">{{ item.tag[1] }}</span>
                    <span>{{ item.tag[2] ? item.tag[2] : "" }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="main-right">
      <div style="margin-bottom: 30px">管理阶段</div>
      <div class="block" style="margin-left: 82px;font-size:9px;">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size || 'large'"
            :timestamp="activity.timestamp"
            :class="index % 2 != 0 ? 'el-timealine-item-live-out' : ''"
            palcement="top"
          >
            <div class="my-card" style="margin-left: -150px;font-size:9px;">
              <div class="my-card-item">
                <div>
                  <span calss="itemPer">{{ activity.stepsText }}</span>
                </div>
                <div>
                  <span calss="itemPer">{{ activity.timestamp }}</span>
                </div>
              </div>
            </div>
            <img src="" alt="" />
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="history">
        <el-button type="info" class="btn">管理阶段审批历史</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { list } from "@/api/list";
export default {
  data() {
    return {
      reload: true,
      contentStyleObj: {
        // height: "320px",
      },
      tabs: [
        {
          isShow: true,
          label: "通用",
          value: "T.通用",
          name: "1",
          id: "1",
        },
        {
          isShow: true,
          label: "联合体",
          value: "L.联合体",
          name: "2",
          id: "2",
        },
        {
          isShow: true,
          label: "分包",
          value: "F.分包",
          name: "3",
          id: "3",
        },
        {
          isShow: true,
          label: "用印",
          value: "Y.用印",
          name: "4",
          id: "4",
        },
        {
          isShow: true,
          label: "费用",
          value: "F.费用",
          name: "5",
          id: "5",
        },
        {
          isShow: true,
          label: "请示",
          value: "Q.请示",
          name: "6",
          id: "6",
        },
        {
          isShow: true,
          label: "报销",
          value: "B.报销",
          name: "7",
          id: "7",
        },
      ],
      list: [
        {
          num: "HT001",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT002",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT003",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT004",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003", "HT004"],
        },
        {
          num: "HT005",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT006",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT007",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT008",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003", "HT004"],
        },
      ],
      tabIndex: "1",
      opened: 0,
      formInline: {
        user: "",
        region: "",
      },
      flag: "all",
      tabPosition: "left",
      activities: [
        {
          stepsText: "投标",
          content: "中标通知书",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-success",
        },
        {
          stepsText: "合同签订",
          content: "标题2",
          timestamp: "2018-04-03 20:46",
          color: "#28528D",
          icon: "el-icon-chenggong",
          type: "success",
        },
        {
          stepsText: "施工准备",
          content: "标题3",
          timestamp: "2018-04-03 20:46",
          type: "warning",
          icon: "icon-qiandinghetong",
          size: "large",
        },
        {
          stepsText: "施工",
          content: "标题2",
          timestamp: "2018-04-03 20:46",
          color: "#BEBEBE",
        },
        {
          stepsText: "结算",
          content: "标题3",
          timestamp: "2018-04-03 20:46",
          size: "large",
          color: "#BEBEBE",
        },
        {
          stepsText: "销项",
          content: "标题4",
          timestamp: "2018-04-03 20:46",
          color: "#BEBEBE",
        },
      ],
    };
  },
  async mounted() {
    this.getList();
  },
  methods: {
    refresh() {
      this.reload = false;
      this.$nextTick(() => (this.reload = true));
    },
    handleClick(index, info) {
      console.log("index    " + index.index);
      let target = document.querySelector(".scroll-content");
      let scrollItems = document.querySelectorAll(".scroll-item");
      if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
        this.tabIndex = index.name;
        // this.tabIndex = index.index.toString();
      }
      let totalY =
        scrollItems[index.index].offsetTop - scrollItems[0].offsetTop;
      let distance = document.querySelector(".scroll-content").scrollTop;
      let step = totalY / 50;
      if (totalY > distance) {
        smoothDown(document.querySelector(".scroll-content"));
      } else {
        let newTotal = distance - totalY;
        step = newTotal / 50;
        smoothUp(document.querySelector(".scroll-content"));
      }

      function smoothDown(element) {
        if (distance < totalY) {
          distance += step;
          element.scrollTop = distance;
          setTimeout(smoothDown.bind(this, element), 10);
        } else {
          element.scrollTop = totalY;
        }
      }

      function smoothUp(element) {
        if (distance > totalY) {
          distance -= step;
          element.scrollTop = distance;
          setTimeout(smoothUp.bind(this, element), 10);
        } else {
          element.scrollTop = totalY;
        }
      }
    },
    // 滚动条滚动
    onScroll(e) {
      let scrollItems = document.querySelectorAll(".scroll-item");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop - 320;
        if (judge) {
          this.tabIndex = i.toString();
          break;
        }
      }
    },
    getHight() {
     this.contentStyleObj.height = window.innerHeight - 320 + "px";
      // this.contentStyleObj.height = window.innerHeight+'px';
      console.log(window.innerHeight)
      console.log(
        "this.contentStyleObj.height  " + this.contentStyleObj.height
      );
    },
    getList() {
      list(this.params).then((res) => {
        // let tableData= res.data.list
        this.tableData = res.data.list;
        // this.total = data.page.total;
        // return tableData
      });
    },
  },
  created() {
    this.getHight();
    window.addEventListener("resize", this.getHight);
  },
  destroyed() {
    window.removeEventListener("resize", this.getHight);
  },
};
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: center;
  padding: 0 20px;
  .main-left {
    flex: 1;
    width: 100%;
    margin-right: 20px;
    .card-header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      .card-left {
        margin-left: 120px;
        flex: 1;
      }
      .card-right {
        text-align: right;
        flex: 1;
        margin-right: 20px;
      }
    }
    .box {
      display: flex;
      justify-content: center;
      .card-content {
        width: 120px;
      }
      .scroll-content {
        // padding-bottom: 320px;
        flex: 1;
        .scroll-item {
          border-bottom: 1px dashed #979797;
          padding-bottom: 20px;
          .scroll-header {
            .title {
              height: 30px;
              line-height: 2;
              margin-top: 20px;
              color: #28528d;
              text-decoration: underline;
              display: inline-block;
            }
          }

          .list-item {
            width: 93%;
            background: #ffffff;
            border: 1px solid #28528d;
            border-radius: 5px;
            padding: 0 15px;
            margin: 15px 0 0 0;
            display: inline-block;
            .item-top {
              display: flex;
              align-items: center;
              margin-top: 15px;
              .item-num {
                font-size: 9px;
              }
              .item-type {
                font-size: 9px;
                flex: 1;
                margin-left: 10px;
              }
              .item-count {
                width: 30px;
                height: 30px;
                font-size: 12px;
                border: 2px solid #ccc;
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
              }
            }
            .item-text {
              font-size: 6px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #252525;
              margin: 10px 0;
            }
            .item-manager {
              font-size: 4px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #696969;
              margin: 10px 0;
            }
            .item-line {
              border-bottom: 1px dashed #979797;
            }
            .item-tag {
              font-size: 6px;
              color: #252525;
              line-height: 26px;
              .bg {
                width: 8px;
                height: 4px;
                background: #252525;
                display: inline-block;
                vertical-align: middle;
              }
              .tag-rig {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .main-right {
    width: 320px;
    .history {
      text-align: center !important;
      .btn {
        background: #28528d;
      }
    }
  }
}
</style>